/**
 * 项目管理的列表
 * @author: zxy
 * @update: 2016-11-16
 */

import React, {PropTypes} from 'react';
import {Row, Col, Button, Table, Popconfirm, Pagination, Menu, Dropdown, Icon} from 'antd';
import CommonMoreOpe from '../Common/CommonMoreOpe';
import styles from './ProjectManageList.less'

function ProjectManage({
  total, pageNumber, pageSize, loading, dataSource,
  onAdd, onPageChange, onShowSizeChange,
  onSale, offSale, onEditItem, onDeleteItem, onCopy, onShowHalf
}) {

  dataSource = [{
    project_num: '001',
    project_name: '足底按摩-通经活络',
    classify: '推荐提成类',
    times: '90',
    project_price: '200',
    key: 1,
    is_half: false,
    is_onSale: false,
  }, {
    project_num: '001',
    project_name: '足底按摩-通经活络',
    classify: '推荐提成类',
    times: '90',
    project_price: '200',
    key: 2,
    is_half: true,
    is_onSale: true,
  }, {
    project_num: '001',
    project_name: '足底按摩-通经活络',
    classify: '推荐提成类',
    times: '90',
    project_price: '200',
    key: 3,
    is_half: false,
    is_onSale: true,
  }, {
    project_num: '001',
    project_name: '足底按摩-通经活络',
    classify: '推荐提成类',
    times: '90',
    project_price: '200',
    key: 4,
    is_half: true,
    is_onSale: true,
  }, {
    project_num: '001',
    project_name: '足底按摩-通经活络',
    classify: '推荐提成类',
    times: '90',
    project_price: '200',
    key: 5,
    is_half: false,
    is_onSale: true,
  }, {
    project_num: '001',
    project_name: '足底按摩-通经活络',
    classify: '推荐提成类',
    times: '90',
    project_price: '200',
    key: 6,
    is_half: false,
    is_onSale: true,
  },];


  const columns = [{
    title: '项目编号',
    dataIndex: 'project_num',
    key: 'project_num',
    sorter: (a, b) => a.project_num - b.project_num,
    width: 80,
  }, {
    title: '项目',
    dataIndex: 'project_name',
    key: 'project_name',
    width: 140,
    render: (text, record) => {
      return (
        <div>
          <div className={styles.leftWrap}>
            <img src="https://image.shuangdj.com/52821791f27e4209b07fec953d232c6c" alt="" className={styles.cover}/>
            {record.is_onSale ? null : (
              <div>
                <div className={styles.mask}></div>
                <div className={styles.maskTitle}>已下架</div>
              </div>)}
          </div>
          <div className={styles.rightWrap}>
            <div className={styles.nameWrap}>{record.project_name}</div>
            {record.is_half ? (<div className={styles.halfIcon}>半</div>) : null}
          </div>
        </div>
      )
    }
  }, {
    title: '时长',
    dataIndex: 'times',
    key: 'times',
    width: 100,
    sorter: (a, b) => a.times - b.times,
  }, {
    title: '价格',
    dataIndex: 'project_price',
    key: 'project_price',
    width: 100,
    sorter: (a, b) => a.project_price - b.project_price,
  }, {
    title: '分类',
    dataIndex: 'classify',
    key: 'classify',
    width: 100,
  }, {
    title: '操作',
    dataIndex: 'ope',
    key: 'ope',
    width: 150,
    render: (text, record) => {
      // 下拉菜单

      const list = [(
        <a onClick={()=>{onCopy(record.key)}}>复制</a>
      ), (
        <a onClick={onShowHalf}>查看半个钟项目</a>
      ), (
        <Popconfirm title="确定要删除吗?" placement="left">
          <a onClick={onDeleteItem}>删除</a>
        </Popconfirm>
      ), (
        <Popconfirm title="确定要上架吗?" placement="left">
          <a onClick={onSale}>上架</a>
        </Popconfirm>
      ),];

      return (
        <Row>
          <Col span={6} offset={6}><a onClick={() => onEditItem(record.key)}>编辑</a></Col>
          <Col span={6}>
            <CommonMoreOpe list={list} closedKeys={['0','1']}/>
          </Col>
        </Row>)
    }
  }];


  return (
    <div style={{overflow: 'hidden'}}>
      <Table
        columns={columns}
        rowKey={record => record.key}
        dataSource={dataSource}
        loading={loading}
        pagination={false}
        title={
          () =>
            <Row>
              <Col span={18} className="tl"></Col>
              <Col span={6} className="tr"><Button onClick={onAdd} type="primary" icon="plus">添加项目</Button></Col>
            </Row>
        }
        bordered
      />
      <Pagination
        className="ant-table-pagination"
        total={total}
        showTotal={total => `共 ${total} 条`}
        current={pageNumber}
        showSizeChanger
        showQuickJumper
        pageSize={pageSize}
        onChange={onPageChange}
        onShowSizeChange={onShowSizeChange}
      />
    </div>
  );
}

ProjectManage.propTypes = {
  total: PropTypes.any,
  pageNumber: PropTypes.any,
  loading: PropTypes.any,
  dataSource: PropTypes.array,
  selectedRowKeys: PropTypes.array,
  onSelectChange: PropTypes.func,
  onPageChange: PropTypes.func,
  onShowSizeChange: PropTypes.func,
  shelvesItem: PropTypes.func,
  offShelvesItem: PropTypes.func,
  onEditItem: PropTypes.func,
  onDeleteItem: PropTypes.func,
};

export default ProjectManage;